<template>
  <div class="main">
    <div class="searchBox clearfix">    	
    	<div class="searchContent ">
    		<!-- <el-input
			  placeholder="角色名称"
			  v-model="param.customName"
			  clearable>
			</el-input>
			<el-input
			  placeholder="角色状态"
			  v-model="param.customIdCard"
			  clearable>
			</el-input>	 
			<el-button @click="searchList">查找</el-button> 
			-->	
			<el-button @click="roleDialog(' ','添加角色',1)">添加</el-button>    		
    	</div>    	
    </div>
    <div class="tableList">
	    <el-table :data="list.rows" row-key="id" border  >
	        <el-table-column label="角色名称" > 
	           <template slot-scope="scope">
	                <span>{{ scope.row.roleName }}</span>
	            </template>           
	        </el-table-column>        
	        <el-table-column label="角色状态">
	            <template slot-scope="scope">
	                <span v-if="scope.row.statusEnum=='NORMAL'">正常</span>
	                <span v-else="scope.row.statusEnum=='FORBID'">停用</span>	                    
	            </template>
	        </el-table-column>
	        <el-table-column label="创建时间">
	            <template slot-scope="scope">
	                <span>{{ scope.row.createTime }}</span>
	            </template>
	        </el-table-column>
	        <el-table-column label="备注">
	            <template slot-scope="scope">
	                <span>{{ scope.row.remark }}</span>
	            </template>
	        </el-table-column>	       
	        <el-table-column  label="操作">
		      <template slot-scope="scope">
		        <el-button
		          size="mini"
		          class="orangeBtn"
		          @click="roleDialog(scope.row,'编辑角色',0)">编辑</el-button>
		        <el-button
		          size="mini"
		          type="danger"
		          class="greenBtn"
		          @click="powerDialog(scope.row,'权限分配')">权限分配</el-button>
		      </template>
		    </el-table-column>
	       
	    </el-table>
    </div>  
    <div class="pagination">   
         <el-pagination
            @size-change="changeNum"
            @current-change="changePage"
            :current-page="param.pageNum"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="param.pageSize"
            layout="total, prev, pager, next,sizes"
            :total="list.total">
        </el-pagination>
    </div>
<!-- 角色添加编辑 -->
		<role ref="detailDialog" @fatherMethod="searchList"  ></role>
<!-- 权限分配 -->
		<power ref="detailDialogPower" @fatherMethod="searchList" ></power>
  </div>
</template>

<script>
import { mapState } from 'vuex';
import role from '@/components/addEditRole';
import power from '@/components/power';

export default {
	name: 'leasingInfo',
	components:{role,power},
	data () {
		return {
			urlAdd:'/system/role/add',
      		urlEdit:'/system/role/edit',			
			idNum:'',
			url:'/system/role/page',
			param: {											                      
	            pageNum: 1,
	            pageSize: 10,                    	          	          
			},			  							
		}
	},
	methods: { 	
	 	changeNum(val) {   
	 		this.param.pageNum=1;        
	        this.param.pageSize = val; 
	        this.$store.dispatch('getlist',{param:this.param,url:this.url});       
	    },
	    changePage(val) { 
	        this.param.pageNum=val;   
	       this.$store.dispatch('getlist',{param:this.param,url:this.url});       
	       
	    }, 
	    tableList(){
	    	this.$store.dispatch('getlist',this.param);
	    },
	    roleDialog(item,title,type){	    //添加&编辑	
	    	if(type==1){	    		
				this.$refs.detailDialog.loadDialogData(item,title,this.urlAdd);
	    	}else{
				this.$refs.detailDialog.loadDialogData(item,title,this.urlEdit);
	    	}    		    		    		    	
	    },
	    powerDialog(item,title){
	    	// this.dialogShowPower=true;
	    	this.$refs.detailDialogPower.loadDialogData(item,title);	  
	    },
	  
	    Pass(index,row){
			this.$confirm('确定通过该业主信息？')
			.then(_ => {
				

			})
			.catch(_ => {
				
			});

	    },
	    searchList(){	    	
	    	this.$store.dispatch('getlist',{param:this.param,url:this.url}); 
	    }	    
	},
	created() {   	
       this.$store.dispatch('getlist',{param:this.param,url:this.url});             
    },
    computed:{
    	...mapState(['list'])
    }
}
</script>
<style scoped>

</style>
